<template>
  <div class="container">
    <Category title="美食" :listData="foods">
      <!--具名插槽：在组件标签体内写标签，根据slot属性将标签插入到组件内name对应的<slot>-->
      <img slot="center" src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
      <a slot="footer" href="http://www.atguigu.com">更多详情</a>
    </Category>
    <Category title="游戏" :listData="games">
      <ul slot="center">
        <li v-for="(item,index) in games" :key="index">{{item}}</li>
      </ul>
      <!--slot属性相同的标签会被放到同一个插槽-->
      <div slot="footer" class="foot">
        <a href="http://www.atguigu.com">单机游戏</a>
        <a href="http://www.atguigu.com">网络游戏</a>
      </div>
    </Category>
    <Category title="电影" :listData="films">
      <video slot="center" src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" controls></video>
      <!--使用template标签可以把多个标签打包插入到插槽中，不改变标签结构；同时支持v-slot:footer这种写法（vue2.6+）-->
      <template v-slot:footer>
        <div class="foot">
          <a href="http://www.atguigu.com">经典</a>
          <a href="http://www.atguigu.com">热门</a>
          <a href="http://www.atguigu.com">推荐</a>
        </div>
        <h4>欢迎前往影院观影</h4>
      </template>
    </Category>
  </div>
</template>

<script>
import Category from './components/Category.vue'
export default {
  name: "App",
  components: {
    Category,
  },
  data() {
    return {
      foods: ['火锅', '小龙虾', '牛排', '烧烤'],
      games: ['红色警戒', '穿越火线', '英雄联盟'],
      films: ['《教父》', '《拆弹专家》', '《尚硅谷》']
    }
  },
  methods: {

  }
}
</script>

<style scoped>
  .container, .foot {
    display: flex; /* 弹性盒模型布局 */
    justify-content: space-around; /* 主轴对齐 */
  }
</style>
